
<template>
  <div ref="lineChart1" style="background: #fff;height: 100%;width: 100%;position: relative;overflow: hidden;" :id="lineChart1Data.id" class="_wz_char">

  </div>
</template>
<script>
export default {
  props: ["lineChart1Data","topHeight"],
  data() {
    return {}
  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    var that = this;
    var data = that.lineChart1Data.data;
    // Step 1: 创建 Chart 对象
    const chart = new G2.Chart({
      container: that.lineChart1Data.id, // 指定图表容器 ID
      forceFit: true,
      height: that.topHeight,
      padding: [30, 10, 30, 30], // 每个 view 之间的间距
      data: data
    });
    chart.line().position('name*value').tooltip('name*value', function (item, percent) {
      percent = percent + that.lineChart1Data.unit;
      return {
        name: item,
        value: percent
      };
    });
    chart.point().position('name*value').shape('circle').label('name*value', function (name, value) {
      return value;
    });

    chart.render();
  },
  methods: {//执行的方法


  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
